<template>
    <div class="ranking">
        <div class="box1">
            <h2>
            <el-button type="info" plain size="mini" :class="title=='总票房'?'on':'false'" style="" @click="change('total')">总票房</el-button>
            <el-button type="info" plain size="mini" :class="title=='日票房'?'on':'false'" style="margin-left:10%" @click="change('day')">日票房</el-button>
            </h2>
        </div>
      
      <!-- <div class="box2">
        <h3>{{ title }}</h3>
      </div> -->

      <div class="table" v-if="title=='总票房'">
        <el-table :data="tableData" style="width: 100%;height: 98%;" @row-click = "onRowClick" :row-class-name="tableRowClassName" class="point">
            <el-table-column prop="name" label="电影名" min-width="30%"> </el-table-column>
            <el-table-column prop="releaseDate" label="上映时间" min-width="25%"> </el-table-column>
            <el-table-column prop="totalBoxOffice" label="票房" min-width="15%"></el-table-column>
        </el-table>
      </div>

      <div class="table" v-else>
        <el-table :data="tableData" style="width: 100%;height: 98%;" @row-click = "onRowClick" :row-class-name="tableRowClassName" class="point">
            <el-table-column prop="name" label="电影名" min-width="30%"> </el-table-column>
            <!-- <el-table-column prop="releaseDate" label="时间" min-width="20%"> </el-table-column> -->
            <el-table-column prop="dayBoxOffice" label="票房" min-width="20%"></el-table-column>
        </el-table>
      </div>
    
    </div>
</template>

<script>
import {inject} from "vue";
import { rankBoxOffice,search } from "../api/index.js";
  export default {
    name:'ItemSix',
    components: {},
    props:{},
    data () {
      const title="总票房"
      return {
        tableData:[],
        totalData:[],
        filmdata:[],
        dayData:[],
        boolShow:true,
        title:title,
        length:0,
        searchparam:{
            params:{
               val:'地球',
               current:1
            }
          },
      }
    },
    methods: {
        onRowClick (row, event, column) {
          //点击获取索引
          if(this.title=="总票房"){
            const index = row.index;
          this.$router.push('/FilmDetail?id='+this.tableData[index].movieId)
          }
          else{
          const index = row.index;
          this.searchparam.params.val = this.tableData[index].name
          this.search(this.searchparam).then(()=>{
            this.$router.push('/FilmDetail?id='+this.filmdata[0].id)
          })
          }
        },
        
        tableRowClassName ({row, rowIndex}) {
          //把每一行的索引放进row
          row.index = rowIndex;
        },
      change(val){
          if(val=='day'){
            this.title="日票房"
            this.tableData = this.dayData
          }
          if(val=='total'){
            this.title="总票房"
            this.tableData = this.totalData
          }
      },
      async getData(){
          let data=await rankBoxOffice();
          this.totalData=data[0]
          this.dayData = data[1]
          this.setData()
      },
      async search(param){
           this.filmdata=await search(param)
      },
      compare(a,b){
        var BoxOfficeA = parseInt(a.totalBoxOffice);
        var BoxOfficeB = parseInt(b.totalBoxOffice);
        if(BoxOfficeA < BoxOfficeB) {
            return 1;
        }
        if(BoxOfficeA > BoxOfficeB) {
            return -1;
        }
        return 0;
      },
      setData(){
          // this.totalData = this.totalData.sort(this.compare)
          for(let i=0; i < this.totalData.length;i++){
            this.totalData[i]['totalBoxOffice']=(this.totalData[i]['totalBoxOffice']/10000).toFixed(2)
            this.totalData[i]['totalBoxOffice']=this.totalData[i]['totalBoxOffice']+'亿'
          }
          for(let i=0; i < this.dayData.length;i++){
            // this.dayData[i]['dayBoxOffice']=(this.dayData[i]['dayBoxOffice'])
            this.dayData[i]['dayBoxOffice']=this.dayData[i]['dayBoxOffice']+'百万'
          }
      }
    },
    created(){
      this.getData().then(()=>{
              this.length=this.totalData.length
              this.tableData = this.totalData
          }) 
    },
  }
</script>

<style scoped>
.on{
  background-color:darkgray;
  color: #fff;
}
.false{
  
}
.ranking{
       width:100%;
       height:100%;
       box-sizing: border-box;
     }
     .box1{
        width:100%;
        height:10%;
        padding-top: 30px;
     }
      h2 {
          color: #fff;
          line-height: 0.6rem;
          text-align: center;
          font-family: 'a';
      }
      h3 {
          height: 0.6rem;
          color: #fff;
          text-align: center;
      }
      .box2{
        width:100%;
        height:10%;
        padding-top:20px;
      }
      .table{
        width:100%;
        height: 90%;
      }
      
     .table .el-table,  .table .el-table__expanded-cell{
        background-color: transparent;
      }
/* 表格内背景颜色 */
    .el-table /deep/ th,.el-table /deep/ tr,.el-table /deep/ td{
        background-color: transparent;
        color:#f6bebe;
        border-bottom: 0;
    }
    .table /deep/ .el-table__inner-wrapper::before{
        height:0px;
    }

</style>